<template lang="">
  <div class="content">
    <div class="main">
      <div class="search" style="border: 0px solid #000;height: 200px;background-color: #fff;padding-top: 10px;">
        <div class="left" style="float: left;">
          <div class="top" style="border: 0px solid #000;margin-top: 0px;text-align: left;margin-bottom: 5px;">
            <el-select v-model="industry" placeholder="请选择行业" clearable @change="getDepartmentList();industryInput()">
              <el-option v-for="dict in industryList" :key="dict.dictKey" :label="dict.dictValue"
                :value="dict.dictValue">
              </el-option>
            </el-select>
            <el-select v-model="province" placeholder="请选择省份" clearable @change="provinceInput()">
              <el-option v-for="item in provinceList" :key="item.dictKey" :label="item.dictKey" :value="item.dictKey">
              </el-option>
            </el-select>
          </div>
          <div class="bottom" style="border: 0px solid #000;margin-left: 0px;margin-top: 20px;">
            <div class="tit"
              style="border: 0px solid #000;text-align: left;margin-top: 10px;padding-left: 25px;min-height:35px">
              <span style="font-size: 16px;color: #999;">单位类型</span>
              <div class="jd" style="border: 0px solid #000;margin-left: 90px;margin-top: -20px;">
                <el-checkbox-group v-model="departmentListBox" @change="departmentInput()">
                  <el-checkbox v-for="item in departmentList" :key="item.dictKey" :label="item.dictValue">
                    {{item.dictValue}}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </div>
        </div>
        <div class="right" style="float: right;border: 0px solid #000;">
          <div class="cx" style="position: relative;left: -200px;">
            <el-input suffix-icon="el-icon-search" v-model="name" placeholder="请输入姓名" @input="nameInput()"
              style="height: 40px;width: 200px;border-radius: 50px;overflow: hidden;">
            </el-input>
            <!-- <el-select v-model="customType" placeholder="请选择客户类型" @input="customTypeInput()" clearable>
                  <el-option v-for="item in dictList" :key="item.dictId" :label="item.dictKey" :value="item.dictKey"
                    style="height: 40px;width: 200px;border-radius: 50px;overflow: hidden;">
                  </el-option>
                </el-select> -->
          </div>
          <div class="cz" style="position: relative;left: 0px;top: -45px;">
            <el-button @click="outputFile" type="danger" class="button">导出</el-button>
          </div>
          <div class="sl">
            <span style="color: rgb(255, 145, 0);font-size: 28px;">{{total}}</span><br>
            <span style="font-size: 18px;color: #666;">联系人数量</span>
          </div>
        </div>
      </div>
      <!-- <div class="search" style="border: 0px solid #000;height: 60px;padding-top: 20px;background-color: #fff;">
            <div class="left" style="float: left;">
              <el-input suffix-icon="el-icon-search" v-model="name" placeholder="请输入姓名" @input="nameInput()"
                style="height: 40px;width: 200px;border-radius: 50px;overflow: hidden;">
              </el-input>
            </div>
            <div class="right" style="float: right;">
              
              <el-button @click="outputFile" type="danger" class="button">导出</el-button>

            </div>
          </div> -->
      <!-- 联系人列表 -->
      <div class="tabs" ref="singleTable" style="width: 100%;cursor: pointer;">
        <el-table border :data="linkmanList" highlight-current-row tooltip-effect="dark"
          style="width: 100%;cursor: pointer;" @row-dblclick="handleSelectionChange" :row-style="{height:'48px'} "
          :cell-style="{padding:'0px'}">
          <el-table-column type="index" width="55" label="序号">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="110" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <div style="color:#161616">
                <el-tag type="danger" effect="dark" size="mini" style="margin-right: 5px;"><span
                    style="color: #fff;font-weight: 600;">{{scope.row.followTotal}}跟进</span></el-tag>{{ scope.row.name
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="username" label="所属客户" width="170" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="industry" label="行业" width="70" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="departmentType" label="单位类型" width="120" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="department" label="部门" width="110" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="duty" label="职务" width="100" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="linkmanType" label="等级" width="80" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="phone" label="电话" width="130" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="province" label="所属省份" width="85" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="city" label="所属县市" width="85" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="starLevel" label="联系人星级" width="180" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-rate disabled v-model="scope.row.starLevel">
              </el-rate>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button @click="updateButton(scope.row)" class="cz-button" type="danger">
                <span style="position: relative;top: -6px;">修改</span>
              </el-button>
              <el-button @click="deleteLinkman(scope.row)" class="cz-button" type="danger">
                <span style="position: relative;top: -6px;"> 删除</span>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="margin:20px;text-align: right;" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :page-size="size" :current-page="current" :page-sizes="[10, 20, 30]"
          :total="total" layout="sizes,prev, pager, next">
        </el-pagination>
        <div style="margin-top: 20px">
        </div>
      </div>
      <!-- 添加联系人 -->
      <!-- <div class="add">
        <el-dialog title="联系人添加" :visible.sync="dialogVisible">
          <el-form>
            <el-form-item label="姓名">
              <el-input v-model="linkmanData.name" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="等级" placeholder="请输入内容">
              <el-select v-model="linkmanData.linkmanType" placeholder="请选择" clearable>
                <el-option label="决策层" value="决策层"></el-option>
                <el-option label="执行层" value="执行层"></el-option>
                <el-option label="内线" value="内线"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="部门级别" placeholder="请选择">
              <el-radio-group v-model="linkmanData.departmentLevel">
                <el-radio label="0">单位领导</el-radio>
                <el-radio label="1">部门领导</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="部门" placeholder="请输入内容">
              <el-input v-model="linkmanData.department">
              </el-input>
            </el-form-item>
            <el-form-item label="职务" placeholder="请输入内容">
              <el-input v-model="linkmanData.duty">
              </el-input>
            </el-form-item>
            <el-form-item label="电话" placeholder="请输入内容">
              <el-input v-model="linkmanData.phone">
              </el-input>
            </el-form-item>
            <el-form-item label="性别" placeholder="请输入内容">
              <el-radio-group v-model="linkmanData.sex">
                <el-radio label="0">男</el-radio>
                <el-radio label="1">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="年龄" placeholder="请输入内容">
              <el-input v-model="linkmanData.age">
              </el-input>
            </el-form-item>
            <el-form-item label="生日" placeholder="请输入内容">
              <el-input v-model="linkmanData.birthday">
              </el-input>
            </el-form-item>
            <el-form-item label="籍贯" placeholder="请输入内容">
              <el-input v-model="linkmanData.nativePlace">
              </el-input>
            </el-form-item>
            <el-form-item label="毕业院校" placeholder="请输入内容">
              <el-input v-model="linkmanData.college">
              </el-input>
            </el-form-item>
            <el-form-item label="地址" placeholder="请输入内容">
              <el-input v-model="linkmanData.adress">
              </el-input>
            </el-form-item>
            <el-form-item label="联系人星级">
              <el-rate style="margin-top: 10px;" v-model="linkmanData.starLevel"></el-rate>
            </el-form-item>
            <el-form-item label="简历" placeholder="请输入内容">
              <el-input v-model="linkmanData.otherMessage"></el-input>
            </el-form-item>
            <el-form-item label="备注" placeholder="请输入内容">
              <el-input v-model="linkmanData.remark">
              </el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer" style="text-align: center;margin-top: 20px; cursor: pointer; ">
            <el-button @click="empty" class="button">取 消</el-button>
            <el-button type="primary" @click="addLinkman()" class="button">添 加</el-button>
          </div>
        </el-dialog>
      </div> -->
      <!-- 修改联系人 -->
      <div class="add">
        <el-dialog title="联系人修改" :visible.sync="dialogVisible1">
          <el-form>
            <el-form-item label="姓名">
              <el-input v-model="updateRow.name" placeholder="请输入内容"></el-input>
            </el-form-item>
            <!-- <el-form-item label="所属客户">
                  <el-input v-model="updateRow.username" placeholder="请输入内容"></el-input>
                </el-form-item> -->
            <el-form-item label="等级" placeholder="请输入内容">
              <el-select v-model="updateRow.linkmanType" placeholder="请选择" clearable>
                <el-option label="决策层" value="决策层"></el-option>
                <el-option label="执行层" value="执行层"></el-option>
                <el-option label="内线" value="内线"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="部门级别" placeholder="请选择">
              <el-radio-group v-model="linkmanData.departmentLevel">
                <el-radio label="0">单位领导</el-radio>
                <el-radio label="1">部门领导</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="部门" placeholder="请输入内容">
              <el-input v-model="updateRow.department">
              </el-input>
            </el-form-item>
            <el-form-item label="职务" placeholder="请输入内容">
              <el-input v-model="updateRow.duty">
              </el-input>
            </el-form-item>
            <el-form-item label="电话" placeholder="请输入内容">
              <el-input v-model="updateRow.phone">
              </el-input>
            </el-form-item>
            <el-form-item label="性别" placeholder="请输入内容">
              <el-radio-group v-model="updateRow.sex">
                <el-radio label="0">男</el-radio>
                <el-radio label="1">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="年龄" placeholder="请输入内容">
              <el-input v-model="updateRow.age">
              </el-input>
            </el-form-item>
            <el-form-item label="籍贯" placeholder="请输入内容">
              <el-input v-model="updateRow.nativePlace">
              </el-input>
            </el-form-item>
            <el-form-item label="毕业院校" placeholder="请输入内容">
              <el-input v-model="updateRow.college">
              </el-input>
            </el-form-item>
            <el-form-item label="地址" placeholder="请输入内容">
              <el-input v-model="updateRow.adress">
              </el-input>
            </el-form-item>
            <el-form-item label="联系人星级">
              <el-rate style="margin-top: 10px;" v-model="updateRow.starLevel"></el-rate>
            </el-form-item>
            <el-form-item label="备注" placeholder="请输入内容">
              <el-input v-model="updateRow.remark">
              </el-input>
            </el-form-item>
            <el-form-item label="简历" placeholder="请输入内容">
              <el-input type="textarea" autosize v-model="updateRow.otherMessage"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer" style="text-align: center;margin-top: 20px; cursor: pointer; ">
            <el-button @click="dialogVisible1 = false" class="button">取 消</el-button>
            <el-button type="primary" @click="updateLinkman()" class="button">修改</el-button>
          </div>
        </el-dialog>
      </div>



    </div>
  </div>
</template>
<script>

  export default {

    data() {
      return {
        activeName: 'first',
        dialogVisible: false,
        dialogVisible1: false,
        linkmanList: [], //列表
        industryList: [],   //行业列表
        departmentList: [],  //单位类型
        departmentListBox: [],
        provinceList: [],   //省份列表
        industry: '',
        province: '',
        current: 1,
        size: 20,
        total: 0,
        name: '',
        updateRow: {},
        linkmanData: {
          customId: '',
          name: '',
          phone: '',
          adress: '',
          otherMessage: '',
          remark: '',
          linkmanType: '',
          department: '',
          birthday: '',
          duty: '',
          age: '',
          sex: '',
          college: '',
          native: '',
          starLevel: '',
          departmentLevel: ''
        },
      }
    },
    mounted() {
      this.getUserLinkman()
      this.getIndustryList()
      this.getProvinceList()
    },
    methods: {
      //省份
      async getProvinceList() {
        // 解构出参数
        const { current, size, dictVar } = this;
        var data = {
          current: 1,
          size: 100,
          dictVar: 'province'
        }
        let result = await this.$API.dict.reqDictList(data)
        // this.total = result.data.total;
        this.provinceList = result.data.data
      },
      //行业
      async getIndustryList() {
        // 解构出参数
        const { current, size, dictVar } = this;
        var data = {
          current: 1,
          size: 100,
          dictVar: 'industry'
        }
        let result1 = await this.$API.dict.reqDictList(data)
        this.industryList = result1.data.data
        this.getDepartmentList()
      },
      //单位类型      
      async getDepartmentList() {
        // 解构出参数
        // this.userData.departmentType = ''
        const { current, size, dictVar } = this;
        var data = {
          current: 1,
          size: 100,
          dictVar: this.industry
        }
        let result = await this.$API.dict.reqDictList(data)
        this.departmentList = result.data.data
      },
      columnFormat(row, column) {
        switch (column.property) {
          case "sex":
            var userTypeMap = ["男", "女"]
            var value = userTypeMap[Number(row[column.property])]
            break;
        }
        return value;
      },
      setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      },
      handleSizeChange(val) {
        // alert(`每页 ${val} 条`);
        this.size = val
        this.getUserLinkman()
      },
      handleCurrentChange(val) {
        // alert(`当前页: ${val}`);
        this.current = val
        this.getUserLinkman()
      },
      nameInput() {
        this.getUserLinkman()
      },
      departmentInput() {
        this.getUserLinkman()
      },
      provinceInput() {
        this.getUserLinkman()
      },
      industryInput() {
        this.getUserLinkman()
      },
      //reqLinkmanList获取联系人
      async getUserLinkman() {
        // 解构出参数
        const {
          current,
          size, name, industry, province, departmentType
        } = this;
        var data = {
          current: current,
          size: size,
          timeBucket: '2'
        }
        if (name != '') {
          data.name = name
        } if (this.departmentListBox.length > 0) {
          data.departmentType = this.departmentListBox.toString()
        } if (industry != '') {
          data.industry = industry
        } if (province != '') {
          data.province = province
        }
        let result = await this.$API.linkman.reqLinkmanList(data)
        this.total = result.data.total;
        this.linkmanList = result.data.data
      },
      // 下载附件
      outputFile() {
        var data = this.linkmanList
        // 获取资源列表接口
        this.$API.file.reqOutPut(data).then(res => {
          if (res.data.code == 200) {
            this.$message.success("导出成功！");
            console.log('--------------------------');
            console.log(res.data.data);
            let link = document.createElement("a");
            link.target = "_blank"
            link.href = process.env.VUE_APP_SERVER_HOST + "/" + res.data.data;
            link.setAttribute("download", "");
            // console.log(link.href);
            link.click();
          }
          else {
            this.$message(res.message)
          }
        });
      },
      // 添加联系人
      addLinkman() {
        var data = this.linkmanData;
        if (data.name == '' && data.departmentLevel == '') {
          this.$message("联系人名称不能为空")
        } else if (data.departmentLevel == '') {
          this.$message("联系人级别不能为空")
        } else {
          this.$API.linkman.reqAddLinkman(data).then(res => {
            if (res.data.code == 200) {
              this.$message.success("添加成功！");
              this.dialogVisible = false;
              this.getUserLinkman();
            } else {
              this.$message.error("添加失败！");
            }
          })
        }
      },
      // 联系人清空
      empty() {
        this.linkmanData.name = ""
        this.linkmanData.phone = ""
        this.linkmanData.adress = ""
        this.linkmanData.otherMessage = ""
        this.linkmanData.remark = ""
        this.linkmanData.linkmanType = ""
        this.linkmanData.department = ""
        this.linkmanData.duty = ""
        this.linkmanData.age = ""
        this.linkmanData.sex = ""
        this.linkmanData.college = ""
        this.linkmanData.native = ""
        this.dialogVisible = false
      },
      // 删除联系人
      deleteLinkman(row) {
        this.$confirm("确认删除联系人吗？", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          var data = {
            linkmanId: row.linkmanId
          }
          this.$API.linkman.deleteLinkman(data).then(res => {
            if (res.data.code == 200) {
              this.$message.success("删除成功！");
              this.getUserLinkman()
            } else {
              this.$message.error("删除失败！");
            }
          })
        })
      },
      updateButton(row) {
        console.log(row)
        this.updateRow = row;
        this.dialogVisible1 = true;
      },
      //修改联系人
      updateLinkman() {
        // if (data.departmentLevel == '') {
        //   this.$message("联系人级别不能为空")
        // } else {
        var data = this.updateRow
        this.$API.linkman.updateLinkman(data).then(res => {
          if (res.data.code == 200) {
            this.$message.success("修改成功！");
            this.dialogVisible1 = false;
            this.getUserLinkman()
          } else {
            this.$message.error("修改失败！");
          }
        })
        // }
      },
      // 联系人详情跳转
      handleSelectionChange(val) {
        console.log(val)
        this.currentRow = val;
        this.$router.push({
          path: '/custem/linkman',
          name: 'linkmanDetail',
          query: {
            linkmanId: this.currentRow.linkmanId,
          }
        });
      },
    }
  }

</script>
<style scoped>
  @import "../style/style.css";

  .main {
    border: 0px solid #000;
    border-radius: 10px;
    overflow: hidden;
  }

  .search .left {
    padding-left: 20px;
  }

  .search .left>>>.el-select .el-input {
    background-color: #f5f5f7;
    width: 200px;
    margin-left: 20px;
    border-radius: 50px;
    overflow: hidden;
    height: 40px;
  }

  .search .left>>>.el-input__icon {
    color: #000;
    font-weight: 600;
  }

  .search .left>>>.el-select .el-input .el-select__caret {
    color: #000;
  }

  .search .right {
    padding-right: 40px;
  }

  .search>>>.el-input__inner {
    background-color: #f5f5f7;
  }

  /* .add>>>.el-input,
  .el-select,
  .el-date-picker {
    border: 1px solid #b6b6b6;
    border-radius: 50px;
    overflow: hidden;
    width: 300px;
    position: relative;
    top: 0;
  } */

  .add>>>.el-select {
    /* border: 1px solid #b6b6b6; */
    border-radius: 50px;
    overflow: hidden;
    width: 300px;
    position: relative;
    top: 0;
  }

  .add>>>.el-dialog {
    position: relative;
    margin: 0 auto 50px;
    border-radius: 15px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
    box-sizing: border-box;
    width: 500px;
    overflow: hidden;
  }

  .add>>>.el-input__suffix {
    text-align: right;
  }

  .add>>>.el-select .el-input {
    width: 100%;
  }

  .add>>>.el-form-item__content {
    text-align: right;
    padding-right: 50px;
  }

  .add>>>.el-radio-group {
    margin-right: 100px;
    /* margin-top: 30px; */
  }

  .sl {
    /* box-shadow: 1px 1px 6px 3px #c4daff; */
    /* border: 1px solid #000; */
    border-radius: 10px;
    height: 100px;
    /* position: relative;
    left: 260px;
    top: -30px; */
    width: 200px;
    line-height: 45px;
    background-color: #fe00000b;
  }
</style>